<template>
  <div>
    <Sticky>
      <NavBar @click-left="onClickLeft" title="购物车">
        <template #left>
          <Icon name="wap-home-o" size="18" color="#ccc" />
        </template>
        <template #right>
          <span class="g-mr-10" v-if="isAuth" @click="onEditCart">{{isEdit ? '完成' : '编辑'}}</span>
          <Icon name="weapp-nav" size="18" color="#ccc" @click="onClickRight" />
        </template>
      </NavBar>
    </Sticky>
    <Cell v-if="!isAuth">
      <template #title>
        <span class="g-mr-10">登录后才能使用</span>
        <a href="/login?redirect=/cart"><Button type="primary" size="mini">登录</Button></a>
      </template>
    </Cell>
    <ul v-if="isAuth">
      <li v-for="item in productList" :key="item.price" class="g-mt-10 product bg-white">
        <div class="g-mr-5 g-ml-5 product-checkbox">
          <Checkbox v-model="item.checkbox" checked-color="#e43130" @change="computePrice" />
        </div>
        <Card class="product-card" :desc="item.desc" :title="item.title" :thumb="item.thumb">
          <template #price>
            <span class="g-text-price">￥{{item.price}}</span>
          </template>
        </Card>
      </li>
    </ul>
    <SubmitBar
      v-if="isAuth"
      class="submit-bar"
      :price="total"
      :button-text="isEdit ? '删除': '提交订单'"
      @submit="onSubmit"
      :loading="loading"
    >
      <Checkbox v-model="isSelectAll" checked-color="#e43130">全选</Checkbox>
    </SubmitBar>

    <Notify />
    <Empty description="空空如也" v-if="productList.length == 0" />
    <Empty image="error" description="登录后才能使用" v-if="!isAuth" />
    <ActionSheet
      v-model="show"
      :actions="actions"
      @select="onSelect"
      close-on-click-action
      close-on-click-overlay
      cancel-text="取消"
    />
    <TabBar :active='2'/>
  </div>
</template>

<script>
import TabBar from "../../components/TabBar";
import {
  NavBar,
  Sticky,
  Icon,
  Cell,
  Button,
  Empty,
  ActionSheet,
  Card,
  Checkbox,
  SubmitBar,
  Notify
} from "vant";
export default {
  name: "cart",
  components: {
    TabBar,
    NavBar,
    Sticky,
    Icon,
    Cell,
    Button,
    Empty,
    ActionSheet,
    Card,
    Checkbox,
    SubmitBar,
    Notify
  },
  data() {
    return {
      show: false,
      isAuth: false,
      isEdit: false,
      isSelectAll: false,
      total: 0,
      loading: false,
      actions: [
        {
          name: "分类搜索",
          action() {
            location.href = "/category"
          }
        },
        {
          name: "个人中心",
          action() {
           location.href = "/me"
          }
        }
      ],
      productList: [
        {
          title: "联想ThinkPad E480",
          desc:
            " 14英寸窄边框商务办公手提笔记本电脑超轻薄本 银色 【i3黑色】8G500+256G固态@4K定制 ",
          thumb:
            "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/100774/17/19593/202263/5e9fbeaaE53737eee/596b0b1bd10a392d.jpg!q70.dpg.webp",
          price: 2899.0,
          checkbox: false
        },
        {
          title: "联想ThinkPad X395",
          desc:
            " 13.3英寸商务便携轻薄笔记本电脑窄边框IPS广视角 锐龙PRO R5-3500U 8G 512G固态@0WCD标配",
          thumb:
            "https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/118658/15/3158/144372/5ea65843Eb7ccc71b/dd73022946ae1e5a.jpg!q70.dpg.webp",
          price: 2201.0,
          checkbox: false
        },
        {
          title:
            "品质优选】实木衣帽架落地卧室挂衣架家用简易单杆式房间衣服架子 ",
          desc: " 原木色榉木-配饰黄铜",
          thumb:
            "https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/105287/35/17747/169663/5e8bdfd8E20c2a02c/9667860f8128819e.jpg!q70.dpg.webp",
          price: 3099.0,
          checkbox: false
        }
      ]
    };
  },
  methods: {
    onClickLeft() {
      location.href = '/home'
    },
    onClickRight() {
      this.show = true;
    },
    onSelect(e) {
      e.action.bind(this)();
    },
    onEditCart() {
      this.isEdit = !this.isEdit;
    },
    onSubmit() {
      if (this.isEdit) {
        this.productList = this.productList.filter(item=>!item.checkbox)
        this.isEdit = false;
        this.computePrice()
      } else {
        let list = this.productList.filter(item => item.checkbox);
        if (list.length == 0) {
          Notify({ type: "warning", message: "请选择商品" });
          return;
        }
        this.loading = true;
        setTimeout(() => {
          Notify({ type: "success", message: "提交成功" });
          this.loading = false;
        }, 1000);
      }
    },
    computePrice() {
      this.total = 0;
      this.productList.forEach(item => {
        if (item.checkbox) {
          this.total += item.price;
        }
      });
      this.total *= 100;
    }
  },
  watch: {
    isSelectAll() {
      if (this.isSelectAll) {
        this.productList.forEach(item => {
          item.checkbox = true;
        });
        this.computePrice();
      } else {
        this.productList.forEach(item => (item.checkbox = false));
        this.total = 0;
      }
    }
  },
  created() {
    this.isAuth = sessionStorage.getItem("auth") || false;
  }
};
</script>

<style scoped lang='scss'>
@import '@/assets/common.scss';
.product-card {
  background: #fff;
  max-width: calc(100vw - 20px);
}
.product {
  padding-left: 20px;
  position: relative;
}
.product-checkbox {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.submit-bar {
  bottom: 50px;
}
</style>
